<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-collection"></i>
      <span>样本基本信息管理</span>
    </div>
    <div class="content">
      <!-- <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="display: flex"
      >
        <el-form-item label="请输入">
          <el-input
            v-model="formInline.user"
            placeholder="请输入编码/名称/位置/经纬度/人员等信息"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" icon="el-icon-refresh-left"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-download"
            >导出</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-upload2"
            >导入</el-button
          >
        </el-form-item>
        <el-form-item style="margin-left: auto">
          <el-button type="primary" @click="onSubmit" icon="el-icon-plus"
            >新建</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        ref="multipleTable"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        :header-cell-style="{
          background: '#03146b',
          color: '#fff',
          fontSize: '18px',
          'text-align': 'center',
          //   padding: '16px 0' /* 调整这里的值以改变高度 */,
        }"
        :cell-style="{ 'text-align': 'center', fontSize: '13px' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="numbering" label="采样点编号" width="130">
        </el-table-column>
        <el-table-column prop="numbering" label="样本编号" width="150">
        </el-table-column>
        <el-table-column prop="sampletime" label="采样时间" width="120">
        </el-table-column>
        <el-table-column prop="serial" label="采样元数据信息" width="150">
        </el-table-column>
        <el-table-column prop="species" label="树种" width="120">
        </el-table-column>
        <el-table-column prop="age" label="树龄" width="60"> </el-table-column>
        <el-table-column prop="personnel" label="采样人员" width="120">
        </el-table-column>
        <el-table-column prop="appearance" label="外观情况" width="120">
        </el-table-column>
        <el-table-column prop="sampletype" label="样本类型" width="120">
        </el-table-column>
        <el-table-column prop="samplenum" label="样本量" width="120"> </el-table-column>
        <el-table-column prop="samplelocation" label="样本保存位置" width="130">
        </el-table-column>
        <el-table-column prpo="picture" label="照片" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.picture" width="80" height="80" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: center; gap: 8px">
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="success"
                plain
                icon="el-icon-success"
                @click="handleEdit(scope.$index, scope.row)"
                >确认</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                icon="el-icon-delete-solid"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
          <el-button @click="toggleSelection()">删除所选</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div> -->
  </div>
</template>
  
  <script>
export default {
  name: "sampleInfo",
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          sampletime: "2005-05-29",
          name: "巩乃斯林场林中",
          species: "雪岭云杉(Picea schrenkiana)",
          age: "5",
          personnel: "袁玉江，张同文",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "圆盘",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          sampletime: "2007-09-07",
          name: "白杨河下",
          species: "中慿国新疆东天山木垒林场",
          age: "5",
          personnel: "范子昂",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "粗芯",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          sampletime: "2005-05-29",
          name: "巩乃斯林场林中",
          species: "雪岭云杉(Picea schrenkiana)",
          age: "5",
          personnel: "袁玉江，张同文",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "圆盘",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          sampletime: "2007-09-07",
          name: "白杨河下",
          species: "中慿国新疆东天山木垒林场",
          age: "5",
          personnel: "范子昂",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "粗芯",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          sampletime: "2005-05-29",
          name: "巩乃斯林场林中",
          species: "雪岭云杉(Picea schrenkiana)",
          age: "5",
          personnel: "袁玉江，张同文",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "圆盘",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          sampletime: "2007-09-07",
          name: "白杨河下",
          species: "中慿国新疆东天山木垒林场",
          age: "5",
          personnel: "范子昂",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "粗芯",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          sampletime: "2005-05-29",
          name: "巩乃斯林场林中",
          species: "雪岭云杉(Picea schrenkiana)",
          age: "5",
          personnel: "袁玉江，张同文",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "圆盘",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          sampletime: "2007-09-07",
          name: "白杨河下",
          species: "中慿国新疆东天山木垒林场",
          age: "5",
          personnel: "范子昂",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "粗芯",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          sampletime: "2005-05-29",
          name: "巩乃斯林场林中",
          species: "雪岭云杉(Picea schrenkiana)",
          age: "5",
          personnel: "袁玉江，张同文",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "圆盘",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          sampletime: "2007-09-07",
          name: "白杨河下",
          species: "中慿国新疆东天山木垒林场",
          age: "5",
          personnel: "范子昂",
          appearance: "良好",
          samplenum: "株27圆盘0粗芯0细芯52",
          sampletype: "粗芯",
          samplelocation: "05房-01柜-02行-04列",
          picture: require("@/assets/images/header/u73.jpg"),
        },
      ],
      currentPage4: 4,
    };
  },
  created() {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    onSearch() {
      console.log("search!");
    },
    selectAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 反向选择
    // 反选，重新遍历一遍数据
    inverseSelection() {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑处理
    handleEdit(index, row) {
      console.log("Editing row:", index, row);
      // 可以弹出编辑对话框，并将选中行的数据传递进去
      this.$prompt("请输入新的名称:", row.name, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          row.name = value; // 更新名称字段
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "编辑取消",
          });
        });
    },

    // 删除处理
    handleDelete(index, row) {
      console.log("Deleting row:", index, row);
      this.$confirm("确定删除此行数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 从表格数据中删除该行
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除取消",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
 .container {
    // padding: 1rem;
    background: #fff;
    margin-top: 1.5rem;
  }
.header {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: rgb(7, 46, 82);
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  background: #fff;
  /* 确保背景为白色 */
}

.content {
  margin: 5rem 2rem;
  border: #eceaeae8 1px solid;
  padding: 1rem;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block {
  display: flex;
  gap: 16px; /* Adjust gap to your preference */
  margin-top: 20px;
}

/* 这部分是增加按钮圆角的样式 */
.el-button {
  border-radius: 5px;
  /* 增大圆角 */
}

.el-button--primary {
  border-radius: 5px;
  /* 确保主要按钮也有相同的圆角 */
}
.el-input .el-input__inner {
  border: 1px solid #dcdfe6; /* 默认边框颜色 */
  box-shadow: none; /* 去掉焦点时的阴影 */
}

.el-input .el-input__inner:focus {
  border-color: #409eff; /* 焦点时边框颜色 */
  outline: none; /* 去掉默认的焦点轮廓 */
}
/* 设置表格单元格的高度 */
.el-table .el-table__body .table-cell {
  height: 60px; /* 根据需要调整高度 */
}

/* 设置图片容器的样式 */
.image-container {
  width: 100%; /* 宽度占满单元格 */
  height: 100%; /* 高度占满单元格 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 隐藏超出部分 */
}

/* 设置图片的样式 */
.image {
  max-width: 100%; /* 最大宽度不超过容器 */
  max-height: 100%; /* 最大高度不超过容器 */
  object-fit: cover; /* 裁剪并填充单元格 */
}
</style>